<template>
    <div class="my-container">

        <!-- 已登录 -->
         <!-- user =>token 判断是否登录 -->
        <div v-if="user" class="header user-info">
                 <div class="base-info">
                     <div class="left">
                        <van-image
                          round
                          fit="cover"
                          class="avatar"
                          :src="userInfo.photo"
                        />
                        <span class="name">每日新闻</span>
                     </div>
                       
                     <div class="right">
                         <van-button size="mini" round> 编辑资料 </van-button>
                     </div>
                 </div>
                  <div class="data-stat">
                       <div class="data-item">
                           <span class="count"> {{ userInfo.art_count}}</span>
                           <span class="text">新闻</span>
                       </div>
                       <div class="data-item">
                           <span class="count"> {{ userInfo.follow_count}}</span>
                           <span class="text">关注</span>
                       </div>
                       <div class="data-item">
                           <span class="count"> {{userInfo.fans_count }} </span>
                           <span class="text">粉丝</span>
                       </div>
                       <div class="data-item">
                           <span class="count"> {{userInfo.like_count}}</span>
                           <span class="text">获赞</span>
                       </div>
                  </div>
           </div>

      <!-- 未登录 -->
          <div v-else class="header not-login">
              <div class="login-btn" @click="$router.push('/login')">
                <img class="mobile-img" src="@/assets/img/phone.svg" alt="">
                <span class="text">登录 / 注册</span>
              </div>
          </div>
           

           <!-- 导航 -->
           <van-grid :column-num="2" class="grid-nav" clickable>
             <van-grid-item class="grid-item">
               <van-icon slot="icon" name="star-o"  class="shouchang"/>
               <span slot="text" class="text">收藏</span>
             </van-grid-item>
             
             <van-grid-item class="grid-item">
               <van-icon slot="icon" name="clock-o" class="lishi"/>
               <span slot="text" class="text">历史</span>
             </van-grid-item>
            
         </van-grid>

 
          <van-cell title="消息通知" is-link></van-cell>
          <van-cell title="小新同学" is-link></van-cell>
          <van-cell 
           v-if="user"  
           title="退出登录"
           class="logout-cell"
           @click="onLogout"
           clickable
           />
          

 
    </div>
</template>


<script>
import { mapState } from 'vuex'
import { getUserInfo} from '@/api/user'

   export default {
      name: 'MyIndex',
       data() {
          return {
            // 用户信息
             userInfo:{}
          }
       },
      computed: {
          ...mapState(['user'])
      },
       created() {
          // 如果用户登录了,这请求加载用户信息数据 this.user 容器里面的数据
         if(this.user) {
            this.loadUserInfo()
         }
       },
      methods: {
         onLogout() {
          
            // 退出提示
            // (在组件中使用this.$ 因为这里是全局引入的)
            this.$dialog.confirm({
                 title: '确认退出吗',
               })
                 .then(() => {
                  // 确认退出：清除登录状态（容器里面的user+本地存储的user）
                  //直接在提交个空的对象到vuex容器里面 然后本地里面的数据是跟着容器里面一起变化的
                  this.$store.commit('setUser',null)

                 })
                 .catch(() => {
                   // on cancel
                   console.log("取消执行这里");
                 })

          
         },
          // 获取用户自己的信息
        async loadUserInfo() {
             try {
               const { data } = await getUserInfo()
                //  console.log(data);
                 this.userInfo = data.data
             } catch(err) {
               this.$toast('获取数据失败哦，请稍后再试')
             }
         },
      }
   }

</script>



<style lang="less">
        .my-container {
            .header {
                height: 361px;
                background: pink;
            }

            .not-login {
               display: flex;
               justify-content: center;
               align-items: center;
                .login-btn {
                  display: flex;
                   flex-direction: column;
                   justify-content: center;
                   align-items: center;

                   .mobile-img {
                      width: 150px;
                      height: 150px;
                      margin-bottom: 15px;
                   }

                   .text {
                       font-size: 30px;
                       color: #fff;
                   }
                }
            }

            .user-info {
               .base-info{
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 height: 231px;
                 padding: 76px 32px 23px;
                 box-sizing: border-box;
                    .left {
                        display: flex;
                        align-items: center;
                       .avatar {
                          width: 132px;
                          height: 132px;
                          margin-right: 23px;
                          border: 5px solid #fff;
                       }
                       .name {
                         font-size: 30px;
                         color: #fff;
                       }
                    }
                  
                  
               }
               .data-stat {
                 display: flex;
                 height: 130px;
               //   background: bisque;
                  .data-item {
                     display: flex;
                     flex: 1;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;
                     color:#fff;
                       .count {
                          font-size: 36px;
                       }
                       .text {
                         font-size: 23px;
                       }
                  }
               }
            }

            .grid-nav {
                margin-bottom: 10px;
               .grid-item {
                    height: 141px;
                    .shouchang {
                       color: #eb5253;
                    }
                    .text{
                      font-size: 28px;
                    }
                    .lishi {
                     color: #ff9d1b;
                    }
                }

            }

            .logout-cell {
                color: red;
                text-align: center;
                margin-top: 10px;
            }

        }
</style>